import React from "react";
import { NavBar } from "react-vant";
import { useNavigate } from "react-router";
import hui1 from "./images/hui1.jpg";
import hui2 from "./images/hui2.jpg";
import hui3 from "./images/hui3.jpg";
import hui4 from "./images/hui4.jpg";
import hui5 from "./images/hui5.jpg";
import hui6 from "./images/hui6.jpg";
import hui7 from "./images/hui7.jpg";
import hui8 from "./images/hui8.jpg";
import styles from "./index.module.css";
const Index: React.FC = () => {
  const navigate = useNavigate();
  return (
    <div>
      <div style={{ position: 'sticky', top: 0, zIndex: 999, height: '100%' }}>
        <NavBar title="会员权益" onClickLeft={() => navigate("/my")} />
      </div>

      {/* 会员卡片 */}
      <div className={styles.hui}>
        <img src={hui1} alt="" />
        <div className={styles.title}>
          <h4>会员卡激活</h4>
          <p>激活后即可享受会员权益服务</p>
        </div>
        <button onClick={() => navigate("/huiyuanma")}>立即激活</button>
      </div>
      {/* 会员服务 */}
      <div className={styles.service}>
        <h3>会员服务</h3>
        <div className={styles.Kall}>
          <div
            className={styles.Ka}
            style={{ background: "#004e40" }}
            onClick={() => navigate("/huicard")}
          >
            <div>
              <h4>私家医生卡</h4>
              <p>7x24小时在线服务</p>
              <p>不限次医生电话图文资询</p>
              <span>￥999</span>
            </div>
            <img
              src={hui2}
              style={{
                width: "35%",
                height: "50%",
                marginTop: "50px",
                marginLeft: "10px",
              }}
              alt=""
            />
          </div>
          <div className={styles.Ka} style={{ background: "#d65536" }}>
            <div>
              <h4>企业关怀卡</h4>
              <p>7x24小时在线服务</p>
              <p>不限次医生电话图文资询</p>
              <span>￥599</span>
            </div>
            <img
              src={hui3}
              style={{
                width: "35%",
                height: "50%",
                marginTop: "50px",
                marginLeft: "10px",
              }}
              alt=""
            />
          </div>
          <div className={styles.Ka} style={{ background: "#0178bc" }}>
            <div>
              <h4>悦享健康卡</h4>
              <p>7x24小时在线服务</p>
              <p>不限次医生电话图文资询</p>
              <span>￥1999</span>
            </div>
            <img
              src={hui4}
              style={{

                marginTop: "50px",
                marginLeft: "10px",
              }}
              alt=""
            />
          </div>
          <div className={styles.Ka} style={{ background: "#043868" }}>
            <div>
              <h4>臻享健康卡</h4>
              <p>7x24小时在线服务</p>
              <p>不限次医生电话图文资询</p>
              <span>￥6999</span>
            </div>
            <img
              src={hui5}
              style={{

                marginTop: "50px",
                marginLeft: "10px",
              }}
              alt=""
            />
          </div>
          <div className={styles.Ka} style={{ background: "#e3bfa5" }}>
            <div>
              <h4>尊享健康卡</h4>
              <p>7x24小时在线服务</p>
              <p>不限次医生电话图文资询</p>
              <span>￥8999</span>
            </div>
            <img
              src={hui7}
              style={{

                marginTop: "50px",
                marginLeft: "10px",
              }}
              alt=""
            />
          </div>
          <div className={styles.Ka} style={{ background: "#2ea680" }}>
            <div>
              <h4>家庭医生月卡</h4>
              <p>7x24小时在线服务</p>
              <p>不限次医生电话图文资询</p>
              <span>￥999</span>
            </div>
            <img
              src={hui6}
              style={{

                marginTop: "50px",
                marginLeft: "10px",
              }}
              alt=""
            />
          </div>
          <div className={styles.Ka} style={{ background: "#00837e" }}>
            <div>
              <h4>家庭医生年卡</h4>
              <p>7x24小时在线服务</p>
              <p>不限次医生电话图文资询</p>
              <span>￥999</span>
            </div>
            <img
              src={hui8}
              style={{

                marginTop: "50px",
                marginLeft: "10px",
              }}
              alt=""
            />
          </div>
        </div>
      </div>
      {/* 渠道 */}
      <div className={styles.quall}>
        <div className={styles.qu}>
          <p>
            渠道合作热线：<span className="tel">17600355186</span>
          </p>
        </div>
      </div>
    </div>
  );
};

export default Index;
